<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>订阅</title>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <link rel="stylesheet" type="text/css" href="css/aui.css" />
    <script src="js/art-template.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/wxrem.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/md5.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        document.writeln("<script type=\"text/javascript\" src=\"js/common.js?"+ Math.random() + "\"></scr"+"ipt>");
    </script>
</head>
<style>
    .home_box{
        padding-bottom: 4rem;
    }
    .center_box{
        -webkit-flex: 1;
        flex: 1;
    }
    .footer_box{
        height: 4.9rem;
        text-align: center;
        line-height: 4.9rem;
        font-weight: bold;
        background: #ffd74b;
        font-size: 1.9rem;
        position: fixed;
        bottom: 0;
        width: 100%;
    }
    .box{
        height: 100%;
        width: 100%;
        background: rgba(0,0,0,.8);
        position: fixed;
        top: 0;
        bottom: 0;
        display: none;
        z-index: 10;
    }
    .code{
        position: fixed;
        top: 50%;
        margin-top: -7.5rem;
        height: 18rem;
        width: 15rem;
        margin-left: -7.5rem;
        left: 50%;
        z-index: 11;
        display: none;
        background: #fff;
    }
    .code h3{
        font-size: 1.6rem;
        font-weight: 600;
        text-align: center;
        line-height: 3rem;
    }
    .code p{
        font-size: 1.4rem;
        text-align: center;
    }
    .code img{
        width: 10rem;
        height: 10rem;
        margin: 0 auto;
    }
</style>
<body>
    <div class="box"></div>
    <div class="code">
        <h3>订阅成功</h3>
        <p>进入蜜读公众号查看</p>
        <img src="img/midu_code.jpg" alt="">
        <p>扫描二维码</p>
    </div>
<div class="flex-vertical home_box" >
    <div class="flex-con center_box">
        <img src="images/NO1.jpg" alt="">
        <img src="images/NO2.jpg" alt="">
        <img src="images/NO3.jpg" alt="">
        <img src="images/NO4.jpg" alt="">
        <img src="images/NO5.jpg" alt="">
        <img src="images/NO6.jpg" alt="">
        <img src="images/NO7.jpg" alt="">
    </div>
    <div class="footer_box">
        订阅听书
    </div>
</div>
<script>

    $('.footer_box').click(function () {
        var unionid = window.sessionStorage.getItem("unionid");
        var subscribe = window.sessionStorage.getItem("subscribe");
        if(subscribe=='true'){
            $.ajax({
                type:"post",
                url:hostUrl+"home/subscribe/add",
                data:{
                    unionid:unionid
                },
                async:true,
                success:function(data) {
                    if(data.status==0){
                        location.href='index.html'
                    }
                }
            });
        }else if(subscribe=='false'){
            $('.box').show()
            $('.code').show()
        }


    })
</script>

</body>
</html>